<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VhkT6V7yA3ieLfrjtN57hroWRgqIx9vO"></script>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script src="../lib/thingjs.min-v1.2.2.4.js"></script>
    <script src="../lib/jquery.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="row">
        <!--ThingJS界面-->
        <div class="col-md-8" style="margin: auto">
            <img src="../imgs/background.jpg" >
        </div>
        <!--登录模块-->
        <div class="col-md-4" style="margin: auto;padding-top: 15%">
            <!--logo-->
            <div class="logo" style=" margin: auto 100px;background-color: #5a6268">
                <img src="../imgs/logo1.PNG">
            </div>
            <!--登录表单-->
            <div class="right" style=" margin: 20px 100px;" >



                    <div class="form-group">
                        <label for="username">用户名</label><a id ="error1" style="padding-left: 80%;visibility: hidden;"><img  height=5% width=5% src="../imgs/错误.png"></a>
                        <input type="text" class="form-control" id="username"  name="username" placeholder="用户名" required="true">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label><a id ="error2" style="padding-left: 85%;visibility: hidden;"><img  height=5% width=5% src="../imgs/错误.png"></a>
                        <input type="text" class="form-control" id="password"  name="password" placeholder="密码" required="true">
                    </div>
                    <a onclick="userLogin()" class="btn  btn-outline-success btn-lg" style="margin: auto;display: block;background-color: #ec8908" role="button" data-toggle="modal">登陆</a>
                    <div style="text-align: center"><span ><a href="#">忘记密码？</a></span></div>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript" th:inline="javascript">
    function userLogin(){
        var username = $("#username").val();
        var password = $("#password").val();
        // if(username == "" || username == null){
        //                var us = document.getElementById("error1");
        //                us.style.visibility = "visible";
        // }
        // if(password == "" || password == null){
        //     var pa = document.getElementById("error2");
        //     pa.style.visibility = "visible";
        // }

        $.ajax({
            url:"/userLogin",
            data:{"username":username,"password":password},
            dataType:"json",
            type:"GET",
            success:function(data){
               if(data == 0){
                   window.location.href="/index";
               }else if(data == 1){
                   var us = document.getElementById("error1");
                   us.style.visibility = "visible";
               }else{
                   var pa = document.getElementById("error2");
                   pa.style.visibility = "visible";
               }
            }
        })
    }
</script>
</html>